<template>
    <el-scrollbar class="flex-fill">
        <div class="d-flex justify-content-end"  style="min-width: 300px;">
            <el-input
                    v-if="barData.searchInput"
                    v-model="input"
                    placeholder="id快捷搜索"
                    style="max-width: 300px;min-width: 80px"
            />
            &nbsp;
            <el-button-group class="d-flex">
                <el-button type="success" v-if="barData.download"><i class="fa fa-download"></i></el-button>

                <!--下拉选择-->
                <el-dropdown trigger="click" :hide-on-click="false" max-height="300">
                    <el-button type="success"><i class="fa fa-th"></i></el-button>
                    <template #dropdown>
                        <el-scrollbar>
                            <el-descriptions
                                    direction="vertical"
                                    column="1"
                                    border
                                    style="max-height: 300px"
                            >
                                <template v-for="(item,index) in barData.fill.data" :key="index">
                                    <el-descriptions-item v-if="index%2==0"
                                                          class-name="desc-item-hide"
                                                          label-class-name="desc-item">
                                        <template v-slot:label>
                                            <el-checkbox
                                                    :label="item.label"
                                                    :checked="true"
                                                    class="w-100"
                                                    @change="(val)=>{choose(val,index)}"
                                            >
                                            </el-checkbox>
                                        </template>
                                    </el-descriptions-item>
                                    <el-descriptions-item v-else label-class-name="desc-item-hide"
                                                          class-name="desc-item">
                                        <el-checkbox
                                                :label="item.label"
                                                :checked="true"
                                                class="w-100"
                                                @change="(val)=>{choose(val,index)}"
                                        >
                                        </el-checkbox>
                                    </el-descriptions-item>
                                </template>
                            </el-descriptions>
                        </el-scrollbar>
                    </template>
                </el-dropdown>

                <!-- 触发搜索 -->
                <el-button v-if="barData.search" type="primary" @click="sbShow($store.state.searchBar)">
                    <i class="fa fa-search"></i>
                </el-button>
            </el-button-group>
        </div>
    </el-scrollbar>
</template>

<script lang="ts">
    import {defineComponent, inject} from 'vue'
    import {useStore} from 'vuex'

    export default defineComponent({
        name: "ToolBar",
        setup() {
            const barData: any = inject('barData');
            const choose = (val, index) => {
                barData.fill.data[index] = val
            }

            //========================搜索条件栏展示========================
            const store = useStore();
            const sbShow = (val) => {
                store.commit('setSearchBar', !val)
            }

            return {
                barData,
                sbShow,
                choose,
            }
        }
    })
</script>

<style scoped>
    >>> .hide {
        height: 0px !important;
    }
</style>